<template>
  <el-upload
    class="avatar-uploader"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="onUploadFile"
  >
    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'

import { computed } from 'vue'
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emit = defineEmits(['update:modelValue'])
let imgUrl = computed({
  get: () => {
    console.log(props.modelValue)
    return props.modelValue.imgUrl
  },
  set: (value) => {
    console.log(value)
    emit('update:modelValue', value)
  }
})
const onUploadFile = (uploadFile) => {
  imgUrl.value = {
    cover_img: uploadFile.raw,
    // 一个包含对象 URL 的字符串，可用于引用指定源 object 的内容。（用于创建可预览的url）
    imgUrl: URL.createObjectURL(uploadFile.raw)
  }
}
</script>

<style scoped lang="scss">
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
</style>
